{% extends 'base/base.html' %}

{% block title %}个人中心{% endblock %}

{% block content %}
<div class="container mt-5">
    <!-- 个人信息卡片 -->
    <div class="card mb-5">
        <div class="card-header bg-primary text-white">
            <h3 class="mb-0">个人信息</h3>
        </div>
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-3 text-center">
                    {% if request.user.head %}
                        <img src="/media/{{ request.user.head }}" alt="头像" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px;">
                    {% else %}
                        <img src="/media/head/default.jpg" alt="默认头像" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px;">
                    {% endif %}
                </div>
                <div class="col-md-5">
                    <h4>{{ request.user.username }}</h4>
                    <p class="text-muted mb-1">注册时间: {{ request.user.date_joined|date:"Y-m-d H:i:s" }}</p>
                    <p class="text-muted">上次登录: {{ request.user.last_login|date:"Y-m-d H:i:s" }}</p>
                </div>
                <div class="col-md-4">
                    <div class="d-grid gap-2">
                        <a href="{% url 'user:change_name' %}" class="btn btn-outline-primary">修改用户名</a>
                        <a href="{% url 'user:change_head' %}" class="btn btn-outline-secondary">修改头像</a>
                        <a href="{% url 'user:change_password' %}" class="btn btn-outline-success">修改密码</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 我的问题卡片 -->
    <div class="card">
        <div class="card-header bg-info text-white">
            <h3 class="mb-0">我的问题</h3>
        </div>
        <div class="card-body">
            {% if questions %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>问题标题</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for question in questions %}
                                <tr>
                                    <td>
                                        <a href="{% url 'main:question_detail' question.pk %}">{{ question.title }}</a>
                                    </td>
                                    <td>{{ question.created_at|date:"Y-m-d H:i:s" }}</td>
                                    <td>
                                        <form action="{% url 'user:delete_question' question.pk %}" method="post" onsubmit="return confirm('确定要删除这个问题吗？');">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-danger btn-sm">删除</button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="alert alert-info text-center" role="alert">
                    您还没有提问过任何问题，<a href="{% url 'main:create_question' %}" class="alert-link">去提问</a>吧！
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}



